<!doctype html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>搭建 JavaScript 开发环境 | Mike SU</title>
<meta property="og:title" content="搭建 JavaScript 开发环境 - Mike SU">
<meta property="og:type" content="article">
	
<meta property="article:published_time" content='2017-10-13T22:33:36&#43;08:00'>
	
	
<meta property="article:modified_time" content='2017-10-13T22:33:36&#43;08:00'>
	
<meta name="Keywords" content="">
<meta name="description" content="搭建 JavaScript 开发环境">
	
<meta name="author" content="Mike SU">
<meta property="og:url" content="https://mikesu.net/35/">
	
	<link rel="shortcut icon" href='/favicon.ico'  type="image/x-icon">
	<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/normalize.css/normalize.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/purecss/build/pure-min.min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/purecss/build/grids-responsive-min.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">

<link rel="stylesheet" href="/css/style.min.css">
	
</head>
<body>
    <div class="body_container">
		<header id="header">
			<div class="site-name ">
	
	<a id="logo" href="/">Mike SU</a>
	<p class="description">Note &amp; Blog</p>
</div>
		    <nav id="nav-menu">
	<a class="" href="/">
		<i class="fa fa-home"> 首页</i>
	</a>
	
	<a  href="/archives/" title="归档">
		<i class='fa fa-archive'></i> 归档
	</a>
	
	<a  href="/about/" title="关于">
		<i class='fa fa-user'></i> 关于
	</a>
	
</nav>
		</header>
        <div id="layout" class="pure-g">
            <div class="pure-u-1 pure-u-md-3-4">
				<main class="content_container">
					
<article class="post">
	<aside class="toc-article">
    <header class="toc-title"><a href="#top">目录</a></header>
    <nav id="TableOfContents">
  <ul>
    <li><a href="#安装nodejs和npm">安装Nodejs和npm</a></li>
    <li><a href="#验证安装">验证安装</a></li>
    <li><a href="#使用淘宝npm镜像">使用淘宝npm镜像</a></li>
    <li><a href="#新建hello-nodejs项目">新建Hello Nodejs项目!</a></li>
    <li><a href="#安装mocha测试框架和chai断言库">安装mocha测试框架和chai断言库</a></li>
    <li><a href="#新建hello_nodejsjs">新建hello_nodejs.js</a></li>
    <li><a href="#运行hello_nodejsjs">运行hello_nodejs.js</a></li>
    <li><a href="#新建测试代码hello_nodejstestjs">新建测试代码hello_nodejs.test.js</a></li>
    <li><a href="#运行测试代码">运行测试代码</a></li>
    <li><a href="#参考">参考</a></li>
  </ul>
</nav>
</aside>

	<h1 class="post-title">搭建 JavaScript 开发环境</h1>
	<div class="post-meta">
	2017年10月13日
	
	</div>
	<div class="post-content">
		<h2 id="安装nodejs和npm">安装Nodejs和npm</h2>
<p>nodejs是javascript的运行环境。
npm是javascript的包管理器。
安装nodejs就会同时安装npm了。
到<a href="https://nodejs.org/">Node.js官方网站</a>下载最新的版本进行安装
安装目录选择c:\dev\nodejs</p>
<h2 id="验证安装">验证安装</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">c:\&gt;node -v
v8.7.0

c:\&gt;npm -v
5.3.0
</code></pre></div><h2 id="使用淘宝npm镜像">使用淘宝npm镜像</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">c:\&gt;npm config set registry https://registry.npm.taobao.org
</code></pre></div><h2 id="新建hello-nodejs项目">新建Hello Nodejs项目!</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">c:\dev\workspaces\nodejs&gt;mkdir hello_nodejs
c:\dev\workspaces\nodejs&gt;cd hello_nodejs
c:\dev\workspaces\nodejs\hello_nodejs&gt;npm init
</code></pre></div><h2 id="安装mocha测试框架和chai断言库">安装mocha测试框架和chai断言库</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">c:\&gt;npm install --save mocha
c:\&gt;npm install --save chai
</code></pre></div><h2 id="新建hello_nodejsjs">新建hello_nodejs.js</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#069;font-weight:bold">function</span> helloNodejs() {
	<span style="color:#069;font-weight:bold">return</span> <span style="color:#c30">&#34;Hello Nodejs!&#34;</span>
}

module.exports <span style="color:#555">=</span> helloNodejs;

console.log(helloNodejs());
</code></pre></div><h2 id="运行hello_nodejsjs">运行hello_nodejs.js</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">c:\&gt;node hello_nodejs.js
Hello Nodejs!
</code></pre></div><h2 id="新建测试代码hello_nodejstestjs">新建测试代码hello_nodejs.test.js</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-js" data-lang="js"><span style="color:#069;font-weight:bold">var</span> helloNodejs <span style="color:#555">=</span> require(<span style="color:#c30">&#39;../hello_nodejs&#39;</span>);
<span style="color:#069;font-weight:bold">var</span> expect <span style="color:#555">=</span> require(<span style="color:#c30">&#39;chai&#39;</span>).expect;

describe(<span style="color:#c30">&#39;Hello Nodejs&#39;</span>, <span style="color:#069;font-weight:bold">function</span>() {
  it(<span style="color:#c30">&#39;should return Hello Nodejs!&#39;</span>, <span style="color:#069;font-weight:bold">function</span>() {
  	expect(helloNodejs()).to.equal(<span style="color:#c30">&#39;Hello Nodejs!&#39;</span>);
  });
});
</code></pre></div><h2 id="运行测试代码">运行测试代码</h2>
<div class="highlight"><pre style="background-color:#f0f3f3;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-fallback" data-lang="fallback">$ npm test

&gt; hello_nodejs@1.0.0 test C:\dev\workspaces\nodejs\hello_nodejs
&gt; mocha

Hello Nodejs!


  Hello Nodejs
    √ should return Hello Nodejs!


  1 passing (0ms)

</code></pre></div><h2 id="参考">参考</h2>
<p><a href="https://nodejs.org">Nodejs 官方网站</a><br>
<a href="http://riny.net/2014/cnpm/">国内优秀npm镜像推荐及使用</a><br>
<a href="http://www.ruanyifeng.com/blog/2015/12/a-mocha-tutorial-of-examples.html">测试框架 Mocha 实例教程</a><br>
<a href="http://mochajs.org/">Mocha 官方网站</a><br>
<a href="http://chaijs.com/">Chai 官方网站</a></p>

	</div>
	
	
<div class="post-nav">
	
	
	<a class="pre" href="/34/">Java RMI远程调用简单示例</a>
	
	
	
</div>

	
<div class="post-archive">
    <ul class="post-copyright">
        <li><strong>原文作者：</strong><a rel="author" href="https://mikesu.net">Mike SU</a></li>
        <li style="word-break:break-all"><strong>原文链接：</strong><a href="https://mikesu.net/35/">https://mikesu.net/35/</a></li>
        <li><strong>版权声明：</strong>本作品采用<a rel="license" href="https://creativecommons.org/licenses/by/4.0/">署名 4.0 国际 (CC BY 4.0)</a>进行许可。</li>
    </ul>
</div>
<br/>


	

	
    

    
    
</article>

				</main>
            </div>
			<div class="pure-u-1-4 hidden_mid_and_down">
			    <div id="sidebar">
				    <section class="widget">
<form class="search-form" action='/search/' method="get" accept-charset="utf-8" _lpchecked="1">
      
      <input type="text" name="q" maxlength="20" placeholder="Search">
	  
</form>
</section>
					
					<section class="widget">
<h3 class="widget-title"><i class="fa fa-file-o"> 最近文章</i></h3>
<ul class="widget-list">
    
    <li>
        <a href="/35/" title="搭建 JavaScript 开发环境">搭建 JavaScript 开发环境</a>
    </li>
    
    <li>
        <a href="/34/" title="Java RMI远程调用简单示例">Java RMI远程调用简单示例</a>
    </li>
    
    <li>
        <a href="/33/" title="通过WebRTC实现网页间文件传输">通过WebRTC实现网页间文件传输</a>
    </li>
    
    <li>
        <a href="/32/" title="Boot2docker通过Samba实现文件夹共享">Boot2docker通过Samba实现文件夹共享</a>
    </li>
    
    <li>
        <a href="/31/" title="docker 使用代理连接 Docker Hub">docker 使用代理连接 Docker Hub</a>
    </li>
    
    <li>
        <a href="/30/" title="Boot2docker通过VirtualBox Guest Additions实现目录共享">Boot2docker通过VirtualBox Guest Additions实现目录共享</a>
    </li>
    
    <li>
        <a href="/29/" title="绿色版Solr安装配置">绿色版Solr安装配置</a>
    </li>
    
    <li>
        <a href="/28/" title="我的博客之路">我的博客之路</a>
    </li>
    
    <li>
        <a href="/27/" title="Pelican支持Swiftype搜索">Pelican支持Swiftype搜索</a>
    </li>
    
    <li>
        <a href="/26/" title="启用免费版MarkdownPad2的Markdown扩展模式">启用免费版MarkdownPad2的Markdown扩展模式</a>
    </li>
    
</ul>
</section>
					
					
				</div>
			</div>
			<div class="pure-u-1 pure-u-md-3-4">
				<footer id="footer">
					<div>
	Copyright &copy; 2021 <a href="https://mikesu.net">Mike SU</a>
	
</div>
<div>
	Powered by<a href="https://gohugo.io/" target="_black" rel="nofollow"> Hugo</a>
	Theme by<a href="https://github.com/tufu9441/maupassant-hexo" target="_black"> Maupassant</a>
</div>
<a id="rocket" href="#top"></a>
					<script type="text/javascript" src="//cdn.bootcdn.net/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/totop.js"></script>

					
	<script type="text/javascript" src="/js/toc.js"></script>

				</footer>
			</div>
        </div>
    </div>
</body>
</html>